<template>
    <div class="login-page">
        <div class="login-wrap flex-center">
            <div class="login-box">
                <div class="box-head flex-center">
                    <div class="text" :class="[tabType == 0 ? 'active-green':'']" @click="tabChange(0)">短信登录</div>
                    <div class="text" :class="[tabType == 1 ? 'active-green':'']" @click="tabChange(1)">手机号注册</div>
                </div>
                <div class="box-body flex-y">
                    <div class="form-title fs-18">手机号</div>
                    <div class="input-box flex mt-26">
                        <img class="ipt-icon" src="../assets/icon/icon_iptUser.png" alt="" />
                        <input class="form-ipt" type="number" v-model="formObj.mobile" @input="getValue($event)" data-k='0'>
                    </div>
                    <div class="form-title fs-18 mt-27">验证码</div>
                    <div class="input-box flex mt-26">
                        <img class="ipt-icon" src="../assets/icon/icon_iptLock.png" alt="" />
                        <input class="form-ipt" type="number" v-model="formObj.code" @input="getValue($event)" data-k='1' />
                        <el-button type="text" class="get-btn" @click="getPhoneCode" :disabled="code.isDisabled" :loading="code.isLoading"
                                   v-if='code.isSend'>获取验证码</el-button>
                        <el-button type="text" class="get-btn" @click="getPhoneCode" :disabled="code.isDisabled" :loading="code.isLoading"
                                   v-else>{{code.countTime}}秒后重发</el-button>
                    </div>
                    <el-button :disabled="isDisabled" :loading="isLoading" class="form-btn mt-54 flex-center" @click='toLogin' @keyup.enter.native="onSubmit">
                        {{ btnText }}
                    </el-button>
                    <!-- <button @click="handleClick" @keyup.enter="handleClick">点击或按回车</button> -->
                </div>
                <div class="protocol-box fs-12 mt-59 flex-center text-center">
                    <el-radio v-model="isChecked" label="1" @input='agree'></el-radio>
                    <p>登录代表阅读并同意<a class="link-text" @click='toProtrol(0)'>《用户协议》</a>和<a class="link-text" @click='toProtrol(1)'>《隐私保护政策》</a></p>
                </div>
            </div>
            <div class="fs-14 version">{{ siteObj.copyright }} {{ siteObj.site_name }} {{ siteObj.icp }}</div>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1000px">
            <div v-html='content'></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <div class="home-wrap flex-center" @click="toHome">
            <img src="../assets/img/home.png"/>
            <p>返回首页</p>
        </div>
    </div>
</template>
<script>
import {
    login,
    register,
    sendSms
} from '../api/login';
import { siteInfo,protocol } from '@/api/base';
export default {
    data() {
        return {
            tabType: 0,
            code: {
                isDisabled: true,
                isLoading: false,
                codeText: '获取验证码',
                countTime: 60,
                timer: null,
                isSend: true,
            },
            formObj: {
                mobile: '',
                code: '',
                platform: 2
            },
            isDisabled: true,
            isLoading: false,
            btnText: '登录',
            isChecked: false,
            jumpPath: '',
            siteObj: {},
            dialogVisible: false,
            dialogTitle:'用户协议',
            content:''
        }
    },
    created() {
        this.jumpPath = this.$route.query.redirect ? this.$route.query.redirect : '/';
        this.getSiteInfo()
        window.addEventListener('keydown', this.onSubmit, false)
        console.log('jumpPath', this.jumpPath)
    },
    beforeDestroy() {
        window.removeEventListener('keydown', this.onSubmit,false);
    },
    destroyed() {
        window.removeEventListener("keydown", this.onSubmit, false)
    },
    methods: {
        /* 获取底部footer信息 */
        getSiteInfo() {
            const that = this;
            siteInfo().then(res => {
                if (res.code == 0) {
                    that.siteObj = res.data;
                }
            })
        },
        tabChange(index) {
            this.tabType = index;
            this.btnText = index == 0 ? '登录' : '注册';
        },
        getValue(e) {
            let that = this,
                formObj = that.formObj,
                {
                    k,
                } = e.target.dataset,
                v = that.$trim(e.target.value);
            switch (Number(k)) {
                case 0:
                    formObj.mobile = v;
                    if ((/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
                        that.code.isDisabled = false;
                    }
                    break;
                case 1:
                    formObj.code = v;
                    if (formObj.code.length == 6 && formObj.mobile) {
                        that.isDisabled = false;
                    } else {
                        that.isDisabled = true;
                    }
                    break;
            }
            that.formObj = formObj;
        },
        getPhoneCode() {
            let that = this;
            if (!that.formObj.mobile) {
                this.$message.error('请输入手机号')
                return;
            }
            if (!(/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
                this.$message.error('手机号码不合法，请重新输入')
                return;
            }
            that.code.isDisabled = true;
            that.code.isLoading = true;
            that.code.codeText = '发送中...';
            sendSms({
                mobile: that.formObj.mobile,
                type: 'code'
            }).then(res => {
                if (res.code == 0) {
                    that.code.isSend = false;
                    that.code.isLoading = false;
                    that.code.timer = setInterval(() => {
                        that.code.countTime--;
                        if (that.code.countTime <= 0) {
                            clearInterval(that.code.timer);
                            that.code.countTime = 60;
                            that.code.isSend = true;
                            that.code.isDisabled = false;
                            that.code.codeText = '获取验证码';
                        }
                    }, 1000)
                } else {
                    that.code.isDisabled = false;
                    that.code.countTime = 60;
                    that.code.isSend = true;
                    that.code.isLoading = false;
                    that.code.codeText = '获取验证码';
                }
            })
        },
        agree(e) {
            console.log('e', e)
        },
        onSubmit(e) {
            if (e.keyCode == 13) {
                this.toLogin()
            }
        },
        handleClick(e){
            console.log('事件出发了',e)
        },
        toLogin() {
            let that = this;
            if (!that.formObj.mobile) {
                this.$message.error('请输入手机号')
                return;
            }
            if (!(/^1[3456789]\d{9}$/.test(that.formObj.mobile))) {
                this.$message.error('手机号码不合法，请重新输入')
                return;
            }
            if (!that.formObj.code) {
                this.$message.error('请输入验证码')
                return;
            }
            if (!that.isChecked) {
                this.$message.error('请同意《用户协议》和《隐私保护政策》')
                return;
            }
            that.isDisabled = true;
            that.isLoading = true;
            that.btnText = '加载中...';
            const submitApi = this.tabType == 0 ? login : register;
            submitApi(this.formObj).then(res => {
                that.btnText = that.tabType == 0 ? '登录' : '注册';
                if (res.code == 0) {
                    that.isDisabled = false;
                    that.isLoading = false;
                    this.$message.success(res.msg)
                    if (that.tabType == 1) {
                        that.tabType = 0;
                        that.btnText = '登录';
                    } else {
                        localStorage.setItem('Client-Access-Token', res.data)
                        setTimeout(() => {
                            that.$router.replace(that.jumpPath)
                        }, 1000)
                    }
                    window.removeEventListener("keydown",this.onSubmit, false)
                } else {
                    that.isDisabled = false;
                    that.isLoading = false;
                }
            })
        },
        toProtrol(type){
            this.dialogVisible = true;
            protocol().then(res=>{
                if(res.code == 0){
                    if(type == 0){
                        this.dialogTitle = '用户协议';
                        this.content = res.data.service_agreement
                    }else{
                        this.dialogTitle = '隐私保护政策';
                        this.content = res.data.privacy_policy
                    }
                }
            })
        },
        toHome(){
            this.$router.push('/')
        }

    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio {
    margin-right: 0;
    margin-top: 3px;
    .el-radio__label {
        padding-left: 0px;
        opacity: 0;
    }
}
.login-page {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: url("../assets/img/bj_login.png") no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.login-wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}
.login-box {
    width: 543px;
    padding: 38px 70px 33px 70px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 5px 10px 1px #8f8f8f;
    border-radius: 36px 36px 36px 36px;
}
.box-head {
    gap: 0 46px;
    align-items: center;
    .text {
        color: #323233;
        font-size: 16px;
    }
    .active-green {
        font-size: 20px;
        font-weight: bold;
        color: var(--main-color);
    }
}
.box-body {
    margin-top: 44px;
    .form-title {
        color: #323233;
        font-family: PingFang SC, PingFang SC;
    }
    .input-box {
        background: #ffffff;
        border-radius: 28px 28px 28px 28px;
        padding: 6px 14px 6px 10px;
        border: 1px solid var(--main-color);
        gap: 0 8px;
        justify-content: space-between;
    }
    .ipt-icon {
        width: 44px;
        height: 44px;
    }
    .form-ipt {
        width: 100%;
        font-size: 16px;
        border: none;
        outline: none;
    }
    .get-btn {
        color: #323233;
        flex-shrink: 0;
        font-size: 16px;
        &.is-disabled {
            color: #c0c4cc;
        }
    }
}
.form-btn {
    height: 50px;
    border-radius: 30px 30px 30px 30px;
    border: none;
    font-size: 18px;
    font-weight: bold;
    background: var(--main-color);
    color: #fff;
    &.is-disabled {
        background-color: rgba(48, 179, 14, 0.5);
        color: rgba(255, 255, 255, 0.5);
    }
}
.protocol-box {
    gap: 0 5px;
    color: #9da4b1;
    input {
        margin: 0;
    }
    :deep(.radio) {
        border-color: red;
    }
    .link-text {
        color: #44c082;
        padding: 0 4px;
    }
}
.version {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-weight: 400;
}
.mt-26 {
    margin-top: 26px;
}
.mt-27 {
    margin-top: 27px;
}
.mt-54 {
    margin-top: 54px;
}
.mt-59 {
    margin-top: 59px;
}
.home-wrap{
    position: fixed;
    right:20px;
    top:20px;
    color:#fff;
    img{
        width: 30px;
        height: 30px;
    }
    p{
        font-size: 16px;
        margin-left:10px;
    }
}
</style>
